<template>
  <div>
    <Card style="height: 240px;padding: 12px 12px 0px">
      <div class="head-title">基本信息</div>
      <div class="detail-body">
        <div class="ant-col-md-6">
          <div class="info">
            <div class="head-info">
              <Avatar size="large" :src="memberInfo.face" />
              <div>
                <div class="name" v-if="memberInfo.nickName && memberInfo.nickName.length > 15">
                  {{memberInfo.nickName.slice(0,15)}}...
                </div>
                <div class="name" v-else>
                  {{memberInfo.nickName}}
                </div>
                <div class="phone">
                  {{memberInfo.mobile}}
                </div>
              </div>
            </div>
            <div class="bottom-info">
              <p>申请时间 {{memberInfo.createTime}}&nbsp;
              <p>
                <i-switch size="large" v-model="memberInfo.status" :true-value="true" :false-value="false"
                          @on-change="memberStatusChange">
                  <span slot="open">启用</span>
                  <span slot="close">禁用</span>
                </i-switch>
              </p>
            </div>
          </div>
        </div>
        <div class="ant-col-md-6">
          <p class="item">
            <span class="label">代理商名称：</span>
            <span class="info">{{memberInfo.nickName}}</span>
          </p>
          <p class="item">
            <span class="label">性别：</span>
            <span v-if="memberInfo.sex===1" class="info">男</span>
            <span v-else class="info">女</span>
          </p>
          <p class="item">
            <span class="label">生日：</span>
            <span v-if="memberInfo.birthday == null || memberInfo.birthday == 'undefined'">暂未完善</span>
            <span v-else class="info">{{memberInfo.birthday}}</span>
          </p>
          <p class="item">
            <span class="label">地区：</span>
            <span v-if="memberInfo.partnerRegion == null || memberInfo.partnerRegion =='' || memberInfo.partnerRegion === 'undefined'"
              class="info">暂未完善</span>
            <span v-else class="info">{{memberInfo.partnerRegion}}</span>
          </p>
          <p class="item">
            <span class="label">发展商家数：</span>
            <span class="info">{{memberInfo.quantity}}</span>
          </p>
          <!-- <p class="item">
            <span class="label">代理佣金：</span>
            <span class="info">{{memberInfo.agentMoney}}</span>
          </p> -->
        </div>
      </div>
    </Card>

    <Card class="mt_10">
      <Tabs value="point" @on-click="memberInfoChange">
        <TabPane label="代理商家" name="point">
          <!-- <div class="pointsTitle" style="justify-content: flex-start; text-align: left;">
            <div style="width: 120px;">
              <div class="points-top-title">
                店铺销售总额
              </div>
              <div class="points-top-text">
                {{memberInfo.point?memberInfo.point:0}}
              </div>
            </div>
          </div> -->
          <div class="point-data" style="margin-top: -5px">
            <Table :loading="loading" border :columns="pointsColumns" :data="pointData" class="mt_10" ref="table">
            </Table>

            <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
              <Page :current="pointSearchForm.pageNumber" :total="pointTotal" :page-size="pointSearchForm.pageSize"
                @on-change="pointChangePage" @on-page-size-change="pointChangePageSize" :page-size-opts="[10, 20, 50, 100]"
                size="small" show-total show-elevator show-sizer></Page>
            </Row>
          </div>
        </TabPane>
      </Tabs>
    </Card>
  </div>
</template>

<script>
  import region from "@/views/lili-components/region";
  import * as API_Member from "@/api/agent.js";
  import ossManage from "@/views/sys/oss-manage/ossManage";
  import liliMap from "@/views/my-components/map/index";
  import * as RegExp from '@/libs/RegExp.js';
  import * as API_Order from "@/api/order.js";

  export default {
    name: "memberDetail",
    components: {
      region,
      ossManage,
      liliMap
    },
    data() {
      return {
        id: "", //会员id
        loading: true, // 表单加载状态
        memberInfo: {}, //会员信息
        //历史积分表格
        pointsColumns: [{
            title: "店铺名称",
            key: "storeName",
            tooltip: true
          },
          {
            title: "商家名称",
            key: "memberName"
          },
          {
            title: "联系方式",
            key: "mobile"
          },
          {
            title: "商家地址",
            key: "storeAddressPath"
          }

        ],
        pointData: [], //历史积分数据
        pointTotal: 0, //历史积分总条数
        //历史积分数据查询form
        pointSearchForm: {
          pageNumber: 1, // 当前页数
          pageSize: 10, // 页面大小
        },

      };
    },
    methods: {
      init() {
        //查询会员信息
        this.getMemberInfo();
        //查询会员的历史积分数据
        this.getPointData();
      },
      //会员信息tab改变事件
      memberInfoChange(v) {
        if (v == "point") {
          this.getPointData();
        }
      },
      //查询会员信息
      getMemberInfo() {
        let param={
          id:this.id
        }
        API_Member.getMemberListData(param).then((res) => {
          this.$set(this, "memberInfo", res.result.records[0]);
        });
      },
      //会员状态改变事件
      memberStatusChange(v) {
        let params = {
          id: this.id,
          status: v
        }
        API_Member.updateMemberStatus(params).then(res => {});
      },



      //查询商家
      getPointData() {
        this.loading = true;
        // this.pointSearchForm.memberId = this.id
        let userId=this.id
        // let param={
        //   userId:this.id
        // }
        API_Member.getHistoryPointData(userId).then((res) => {
          this.loading = false;
          if (res.success) {
            this.pointData = res.result.records;
            this.pointTotal = res.result.total;
          }
        });
        this.loading = false;
      },
      //记录页数变化
      pointChangePage(v) {
        this.pointSearchForm.pageNumber = v;
        this.getPointData();
      },
      //记录页数变化
      pointChangePageSize(v) {
        this.pointSearchForm.pageNumber = 1;
        this.pointSearchForm.pageSize = v;
        this.getPointData();
      }
    },

    mounted() {
      this.id = this.$route.query.id;
      this.init();
    },
  };
</script>
<style lang="scss" scoped>
  @import "memberDetail.scss";
</style>
